<template>
	<!-- 首页 -->
	<u-row>
		<u-col span="12">
			<u-swiper height="420rpx" :list="swiperList"></u-swiper>
		</u-col>
	</u-row>
	<view class="content-wrap">
		<!-- 上门收衣 -->
		<view class="tools-box">
			<u-row>
				<u-col span="10" offset="1">
					<u-image src="/static/images/a4.png" width="100%" height="100rpx"></u-image>
				</u-col>
			</u-row>
			<u-row>
				<u-col span="10" offset="1" customStyle="margin-top: 6rpx;">
					<view class="reservation">
						<u-button color="#05C160">
							<text style="letter-spacing: 0.5rem;">免费预约上门收衣</text>
						</u-button>
						<view class="reser-tip">回收领能量</view>
					</view>
				</u-col>
			</u-row>
			<u-row>
				<u-col span="10" offset="1" customStyle="margin-top: 30rpx;">
					<u-grid :border="false">
						<u-grid-item v-for="(item, i) in toolsIconList" :key="i">
							<view class="tool-item">
								<u-image :src="item.icon" width="38rpx" height="38rpx"></u-image>
								<text class="grid-text">{{item.name}}</text>
							</view>
						</u-grid-item>
					</u-grid>
				</u-col>
			</u-row>
		</view>
		<!-- 关注横幅 -->
		<u-row>
			<u-col span="12" customStyle="margin-top: 40rpx;">
				<view class="care-box">
					<view>关注回收蛙生活号，超多专属福利等你来!</view>
					<view class="care-icon">
						<u-image src="/static/images/a5.png" width="34rpx" height="34rpx"></u-image>
					</view>
				</view>
			</u-col>
		</u-row>
		<!-- 活动进行时 -->
		<u-row>
			<u-col span="12" customStyle="margin: 38rpx; 0">
				<view class="title-box">
					活动进行时
				</view>
			</u-col>
		</u-row>
		<u-row>
			<u-col span="12">
				<u-grid :border="false" col="2" @click="activityChange">
					<u-grid-item v-for="(item, i) in activityIconList" :key="i">
						<view class="activity-item" :style="{background: item.color}">
							<view class="a-title">{{item.title}}</view>
							<view class="a-sub-title">{{item.subTitle}}</view>
							<view class="a-icon">
								<u-image :src="item.icon" width="114rpx" height="114rpx"></u-image>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</u-col>
		</u-row>
		
		<u-row>
			<u-col span="12" customStyle="margin: 38rpx; 0">
				<view class="title-box">
					最新动态
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, readonly, ref } from "vue";
	// 引入本地图片
	import icon1 from '@/static/images/a1.png'
	import icon2 from '@/static/images/a2.png'
	import icon3 from '@/static/images/a3.png'
	import icon6 from '@/static/images/a6.png'
	import icon7 from '@/static/images/a7.png'
	import icon8 from '@/static/images/a8.png'
	import icon9 from '@/static/images/a9.png'
	
	// 轮播图
	const swiperList = reactive([
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	])
	// 预约上门图标
	const toolsIconList = readonly([
		{ name: '提现余额', icon: icon1 },
		{ name: '免费上门', icon: icon2 },
		{ name: '300+城市', icon: icon3 },
	])
	const activityIconList = readonly([
		{ title: '回收换礼', icon: icon6, subTitle: '0元包邮领好礼', color: '#D6F3E1', href: '' },
		{ title: '校企减碳', icon: icon7, subTitle: '为环保代言', color: '#E5EAF0', href: '/order/carbon-reduction/carbon-reduction' },
		{ title: '福利商城', icon: icon8, subTitle: '积分换钱花', color: '#F4EEE2', href: '/order/carbon-reduction/carbon-reduction' },
		{ title: '衣同公益', icon: icon9, subTitle: '助力真公益', color: '#F5E7E4', href: '/order/public-welfare/public-welfare' },
	])

	// import { onLoad, onReady } from "@dcloudio/uni-app"
	// import { useUserInfo } from '@/store/index'
	// import {
	// 	login
	// } from '@/api/login'
	// import { Login } from '@/api/login/type'
	// const user = useUserInfo()
	// onLoad(() => {
	// 	// isPingTest()
	// })
	// onReady(() => console.log(456))
	// const title = ref<string>('hello')
	// const isPingTest = async () => {
	// 	const res: Login.Response = await login({mobile: '15214206277', password: '123456', type: 1})
	// 	console.log('响应结果', res.token);
	// }
	const activityChange = (e: number) => {
		uni.navigateTo({
			url: activityIconList[e].href
		})
	}
</script>

<style lang="scss" scoped>
	.content-wrap {
		padding: 0 30rpx;
		margin-top: -60rpx;
		position: relative;
		z-index: 2;
	}

	.tools-box {
		padding: 20rpx 0 30rpx 0;
		border-radius: 17rpx;
		background: #FFFFFF;

		.tool-item {
			display: flex;
			align-items: center;

			.grid-text {
				margin-left: 10rpx;
				color: #565656;
				font-size: 22rpx;
			}
		}
	}

	.reservation {
		position: relative;

		.reser-tip {
			@include flex-center();
			position: absolute;
			top: 12rpx;
			right: 5%;
			font-size: 13rpx;
			color: #337004;
			z-index: 99;
			background: #ACEC15;
			border-radius: 12rpx;
			letter-spacing: 0.1rem;
			padding: 6rpx 12rpx;
		}
	}
	.care-box {
		position: relative;
		@include flex-center(100%, 62rpx);
		background: linear-gradient(-88deg, #A4EAD2 0%, #36D7A1 100%);
		border-radius: 32rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		.care-icon {
			position: absolute;
			top: 50%;
			right: 12rpx;
			transform: translateY(-50%);
		}
	}
	.title-box {
		color: #000000;
		font-size: 28rpx;
		font-weight: bold;
		letter-spacing: 0.1rem;
	}
	.activity-item {
		position: relative;
		width: 333rpx;
		height: 138rpx;
		border-radius: 13rpx;
		padding: 27rpx;
		margin-bottom: 18rpx;
		.a-title {
			font-size: 24rpx;
			font-weight: bold;
			color: #282828;
		}
		.a-sub-title {
			font-size: 20rpx;
			color: #565656;
			margin-top: 12rpx;
		}
		.a-icon {
			position: absolute;
			right: 14rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
</style>